.clearfix
  &::after
    content ''
    display block
    height 0
    line-height 0
    clear both
    visibility hidden

.root
  background-color rgb(248, 248, 248)
  margin-left -10px
  margin-right -10px
  padding 15px 20px
  ul
    list-style none
    padding 0
    @extend .clearfix
    li
      width 54px
      height 54px
      position relative
      float left
      &+li
        margin-left 13px
      &:nth-child(7n+1)
        margin-left 0
      &:nth-child(n+8)
        margin-top 13px
      &.add
        display flex
        justify-content center
        align-items center
        border 2px dashed rgb(187,187,187)
        a
          justify-content center
          width 100%
          height 100%
        i
          color rgb(170, 170, 170)
          margin 0
          font-size 18px
        input
          opacity 0
          position absolute
      &.loading
        background-color rgba(255,255,255,.5)
        display flex
        flex-direction column
        justify-content flex-end
        [data-role="ui-progress"]
          height 6px
        span
          position absolute
          top 50%
          font-size 10px
          margin-top -10px
          width 100%
          text-align center
          line-height 20px
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          padding 0 5px
      &.image
        background-size cover
        .del
          background-color rgba(0,0,0,0.6)
          position absolute
          right -8px
          top -8px
          width 16px
          height 16px
          display flex
          align-items center
          justify-content center
          border-radius 16px
          i
            font-size 10px
            margin 0
						color #fff
